今天要來介紹animation剩下的屬性:
animation-iteration-count
:動畫播放次數animation-direction
:動畫播放方向animation-fill-mode
:動畫播放前後狀態animation-play-state
:動畫播放或暫停屬性值介紹
名稱 | 說明 |
---|---|
number | 播放的次數,預設值為1 |
infinite | 動畫連續播放不停止 |
屬性值介紹
名稱 | 說明 |
---|---|
normal | 預設值,正常播放,順向,從0%→100% |
reverse | 反向播放,逆向,從100%→0% |
alternate | 正逆向輪流播放,奇數次為0%→100%,偶數次為100%→0%,若動畫播放次數只有一次就只會正常播放。 |
alternate-reverse | alternate 的相反,奇數次為100%→0%,偶數次為0%→100%,若動畫播放次數只有一次就只會反向播放。 |
如下圖,為alternate的示範,第一次是從50px放大到100px,第二次是從100px縮小到50px,再加上infinite無限播放,就形成一直放大縮小的情形
.ball{
background-color:black;
color:white;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
animation:change 3s alternate infinite;
}
@keyframes change{
from{
width:50px;
height:50px;
}
to{
width:100px;
height:100px;
}
}
屬性值介紹
名稱 | 說明 |
---|---|
none | 預設值,播放結束後,返回最初狀態 |
forwards | 播放結束後,保持在最後影格狀態 |
backwards | 播放結束後,保持在第一個影格狀態 |
both | alternate 的相反,奇數次為 100% 到 0%,偶數次為 0% 到 100%,若動畫播放次數只有一次就只會反向播放。 |
屬性值介紹
名稱 | 說明 |
---|---|
running | 預設值,播放 |
paused | 停止 |
呼~到今天為止animation的屬性算是介紹完了,如果沒看過前面的文章,給個懶人包
~不專業學習筆記,如有疑問或是錯誤,歡迎不吝指教~
參考來源
[1] https://www.oxxostudio.tw/articles/201803/css-animation.html
[2] https://www.w3schools.com/cssref/css3_pr_animation.asp